<template>
  <div class="page-testreview">
    <div class="pageposition">
      <!-- 头部开始 -->
      <div class="head">
        <div class="head-left">
          <span class="head-l-t" v-if="type == 1">练习中</span>
          <span class="head-l-t" v-if="type == 2">考试中</span>
          <span class="head-l-t" v-if="type == 3">训练中</span>
          <span class="head-tips" v-if="type == 2">*请认真完成本次考试，中途退出考试会影响打分！</span>
        </div>
        <div class="head-right">
          <Button type="primary" @click="handleClickBtn" v-if="type == 1 || type == 3">查看解析</Button>
          <Button type="error" style="margin-left:20px;" @click="$router.push('/classroom?action=mytopic')" v-if="type == 1 || type == 3">退出</Button>
          <Button type="primary" @click="handleRestart" v-if="type == 2">提交试卷</Button>
          <Button type="error" style="margin-left:20px;" @click="is_show_logout = true" v-if="type == 2">退出考试</Button>
        </div>
      </div>
      <div class="body-content">
        <div class="toppos">
          <div class="top-left" v-if="!is_done_test && seconds != 0">
            <img src="/img/pc/clock.png" alt="">
            <no-ssr>
              <van-count-down :time="seconds" @finish="finish" format="HH:mm:ss" style="font-size: 30px;font-weight: bold;color: #43474d;">
              </van-count-down>
            </no-ssr>
          </div>
          <div class="top-left" v-if="is_done_test && type == 2">
            <img src="/img/pc/clock.png" alt="">
            <no-ssr>
              <van-count-down time="0" format="HH:mm:ss" style="font-size: 30px;font-weight: bold;color: #43474d;">
              </van-count-down>
            </no-ssr>
          </div>
          <div class="mainpos" v-if="type == 1 || type == 3">
            <span>{{ sub_title }}</span>
          </div>
          <div class="top-right">
            <div class="paper-name">
              <span v-if="type == 2">{{paper_obj.name}}（{{course_obj.courseName}}）</span>
              <span v-if="type == 1 || type == 3">{{course_obj.courseName}}</span>
              <!-- 教资证-体验试卷（教资证-普通话（体验课）） -->
            </div>
            <div class="question-count">
              <span v-if="question_list && question_list.length > 0">{{getQuestionType(question_list[num_active])}}</span>
              <span>{{num_active+1}}/{{question_list.length}}</span>
            </div>
          </div>
        </div>
        <div class="questions">
          <div class="questions-left">
            <div class="question-cart">答题卡</div>
            <div class="question-box">
              <div class="question-list" v-for="(item,index) in Math.ceil(question_list.length/4)" :key="index">
                <div :class="['list-item','active-left',(1+(item-1)*4) == question_list.length?'active-right':'',(1+(item-1)*4) == num_active+1 ? 'num_active' : null]" v-if="1+(item-1)*4 <= question_list.length" @click="handleToItem(1+(item-1)*4-1)">{{1+(item-1)*4}}</div>
                <div :class="['list-item',(2+(item-1)*4) == question_list.length?'active-right':'',(2+(item-1)*4) == num_active+1 ? 'num_active' : null]" v-if="2+(item-1)*4 <= question_list.length" @click="handleToItem(2+(item-1)*4-1)">{{2+(item-1)*4}}</div>
                <div :class="['list-item',(3+(item-1)*4) == question_list.length?'active-right':'',(3+(item-1)*4) == num_active+1 ? 'num_active' : null]" v-if="3+(item-1)*4 <= question_list.length" @click="handleToItem(3+(item-1)*4-1)">{{3+(item-1)*4}}</div>
                <div :class="['list-item','active-right',(4+(item-1)*4) == num_active+1 ? 'num_active' : null]" v-if="4+(item-1)*4 <= question_list.length" @click="handleToItem(4+(item-1)*4-1)">{{4+(item-1)*4}}</div>
              </div>
            </div>
          </div>
          <div class="questions-right">
            <Carousel v-model="num_active" :autoplay="setting.autoplay" :dots="setting.dots" :arrow="setting.arrow">
              <CarouselItem v-for="(item, index) in question_list" :key="index">
                <div v-html="item.question.question"></div>
                <template v-if="item.type == 1">
                  <div class="answer-box">
                    <RadioGroup v-model="item.user_answer">
                      <Radio :label="x" :disabled="item.is_answered" v-for="(i, x) in item.question.answer" :key="'t1' + x">
                        <span>{{ i }}</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </template>
                <template v-if="item.type == 2">
                  <div class="answer-box">
                    <CheckboxGroup v-model="item.user_answer">
                      <Checkbox v-for="(i, x) in item.question.answer" :disabled="item.is_answered" :label="i" :key="'t2' + x"></Checkbox>
                    </CheckboxGroup>
                  </div>
                </template>
                <template v-if="item.type == 3">
                  <div class="answer-box">
                    <Input v-model="item.user_answer" type="textarea" :rows="8" :disabled="item.is_answered" placeholder="请输入答案" />
                  </div>
                </template>
                <template v-if="item.type == 4">
                  <div class="answer-box">
                    <template v-for="(item1, index1) in item.user_answer">
                      <Input :value="item1" :disabled="item.is_answered" @on-change="
                            v => handleAnswerInputChange(v, item, index1)
                          " placeholder="请输入答案" :key="'t4' + index1" />
                    </template>
                  </div>
                </template>
                <template v-if="item.type == 5">
                  <div class="answer-box">
                    <RadioGroup v-model="item.user_answer">
                      <Radio :label="1" :disabled="item.is_answered">
                        <span>正确</span>
                      </Radio>
                      <Radio :label="0" :disabled="item.is_answered">
                        <span>错误</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </template>
                <div class="question-btn" style="text-align:right;">
                  <i-button @click="next" v-if="(num_active+1) != question_list.length">下一题</i-button>
                </div>
                <!-- 分析 -->
                  <div class="parsing" v-if="item.is_show_edit">
                    <div class="right_answer">
                      <p>正确答案:</p>
                      <div class="right-box">
                        <template v-if="item.type == 1">
                          <p>
                            {{ item.question.answer[item.answer] }}
                          </p>
                        </template>
                        <template v-if="item.type == 2">
                          <p v-for="(i, x) in item.answer" :key="x">
                            {{ item.question.answer[i] }}
                          </p>
                        </template>
                        <template v-if="item.type == 3">
                          <p>
                            {{ item.answer }}
                          </p>
                        </template>
                        <template v-if="item.type == 4">
                          <p v-for="(i, x) in item.answer" :key="x">
                            {{ i }}
                          </p>
                        </template>
                        <template v-if="item.type == 5">
                          <p>
                            {{ item.answer == 1 ? "正确" : "错误" }}
                          </p>
                        </template>
                      </div>
                    </div>
                    <div class="error_answer" v-if="type == 3">
                      <p>错误次数:{{ getWrongTime() }}</p>
                    </div>
                    <div class="error_parsing">
                      <p class="e1">题目解析:</p>
                      <p class="e-ctn">
                        {{ item.parsing }}
                      </p>
                    </div>
                  </div>

              </CarouselItem>
            </Carousel>
            <!-- <div class="questions-title">
              {{ item.question.question }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <Modal v-model="is_show_result" :title="user_info.acName" :transfer="false" cancel-text="考试回顾" ok-text="完成退出" @on-ok="ok" @on-cancel="cancel">
      <div class="test-result-box">
        <div class="rs-tt">
          您本次考试《<span class="tt-st">{{ paper_obj.name }}</span>》成绩为
        </div>
        <div class="rs-tt rs-md">
          <span class="rs-sc">{{ test_result.score }}</span>
          <span class="rs-lg">分</span>
        </div>
        <div class="rs-tx" v-if="paper_obj.passScore <= test_result.score">
          恭喜！您已通过本次考试
        </div>
        <div class="rs-tx" v-if="paper_obj.passScore > test_result.score">
          您未能通过本次考试，继续努力！
        </div>
      </div>
    </Modal>
    <div v-if="is_show_logout" class="logout-modal">
      <div class="logout">
        <div class="logout-title-modal">是否确定退出考试？</div>
        <div class="logout-tips">中途退出考试会影响正常分数，请谨慎退出！</div>
        <div class="logout-btn">
          <i-button @click="$router.push('/')">仍要退出</i-button>
          <i-button @click="is_show_logout = false">取消</i-button>
        </div>
      </div>
    </div>
    <div v-if="is_show_submit" class="submit-modal">
      <div class="submit">
        <div class="submit-img">
          <img src="/img/pc/test-submit.png" alt="">
        </div>
        <div class="submit-title-modal">考试已结束，请停止作答！</div>
        <div class="submit-tips">分数会自动保存到个人中心-考试分析中</div>
        <div class="submit-btn">
          <i-button @click="$router.push('/')">暂时不看</i-button>
          <i-button @click="is_show_submit = false;is_show_result = true">查看分数</i-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getTestPaper,
  getQuestionBank,
  sumbitTest,
  wrongQuestions,
  wrongQuestionsSave,
  getMyWrongWq,
} from "~/api/test";
import { getCourse } from "~/api/course";
import { hexCharCodeToStr } from "~/utils/commonfun";
export default {
  data() {
    return {
      course_obj: {}, //课程
      question_type_arr: [
        { id: 1, name: this.$t("locale.pc.mytest.testReview.t23") },
        { id: 2, name: this.$t("locale.pc.mytest.testReview.t24") },
        { id: 3, name: this.$t("locale.pc.mytest.testReview.t25") },
        { id: 4, name: this.$t("locale.pc.mytest.testReview.t26") },
        { id: 5, name: this.$t("locale.pc.mytest.testReview.t27") },
      ], //题型
      question_arr: [], //练习题
      paper_obj: {
        items: [],
      }, //试卷
      is_ready: false, //是否进入考试
      num_active: 0, //当前页
      interval: null, //定时器
      seconds: 0, //倒计时
      is_finish: false, //倒计时结束
      is_show: false, //答题卡弹窗
      is_show_result: false, //考试结果弹窗
      is_show_logout: false, //考试退出弹窗
      is_show_submit:false,//提交试卷弹窗
      test_result: {
        paperId: 0,
        userId: 0,
        score: 0,
        createTime: 0,
      },
      is_done_test: false, //是否提交了考试
      setting: {
        autoplay: false,
        dots: "none",
        arrow: "never",
      },
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      web_info(state) {
        return state.web_info;
      },
      major_list(state) {
        return state.major_list;
      },
      token(state) {
        return state.token;
      },
    }),
    question_list: {
      get() {
        return this.question_arr;
      },
      set(val) {},
    },
    type() {
      //1.题库练习 2.专项考试 3.错题训练
      return this.$route.query.type;
    },
    //课程id
    courseId() {
      return this.$route.query.id;
    },
    //我的考试-错题集id
    wrongId() {
      return this.$route.query.wrongid;
    },
    //试卷id
    paper_id() {
      return this.$route.query.paper_id;
    },
    sub_title() {
      if (this.type == 1) {
        return this.$t("locale.pc.mytest.testReview.t28");
      } else if (this.type == 2) {
        return this.$t("locale.pc.mytest.testReview.t29");
      } else if (this.type == 3) {
        return this.$t("locale.pc.mytest.testReview.t30");
      }
    },
  },
  destroyed() {
    this.destroyRemotion();
  },
  deactivated() {
    this.destroyRemotion();
  },
  methods: {
    ...mapActions(["initMajorList"]),
    ...mapMutations(["SET_IS_LOADING"]),
    // 倒计时
    // countDown(times){
    //   var timer=null;
    //   timer=setInterval(function(){
    //     var day=0,
    //     hour=0,
    //     minute=0,
    //     second=0;//时间默认值
    //     if(times > 0){
    //     day = Math.floor(times / (60 * 60 * 24));
    //     hour = Math.floor(times / (60 * 60)) - (day * 24);
    //     minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
    //     second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    //     }
    //     if (day <= 9) day = '0' + day;
    //     if (hour <= 9) hour = '0' + hour;
    //     if (minute <= 9) minute = '0' + minute;
    //     if (second <= 9) second = '0' + second;
    //     //
    //     console.log(day+"天:"+hour+"小时："+minute+"分钟："+second+"秒");
    //     times--;
    //   },1000);
    //   if(times<=0){
    //     clearInterval(timer);
    //   }
    // },
    handleToItem(n) {
      this.num_active = n;
    },
    getQuestionType(item) {
      // console.log(item,"问题")
      let res = this.question_type_arr.filter((i) => i.id == item.type);
      if (res.length > 0) {
        return res[0].name + "题";
      } else {
        return this.$t("locale.pc.mytest.testReview.unknow");
      }
    },
    async getQuestion() {
      let params = {
        courseId: this.courseId,
      };
      let result = await getQuestionBank(params);
      if (result && result.data && result.data.code == 200) {
        this.question_arr = result.data.data.rows.map((i) => {
          let item_copy = {
            ...i,
            question: JSON.parse(i.question),
          };
          let user_answer;
          switch (item_copy.type) {
            case 1:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
            case 2:
              user_answer = [];
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              break;
            case 3:
              user_answer = "";
              break;
            case 4:
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              user_answer = item_copy.answer.map((i) => {
                return "";
              });
              break;
            case 5:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              break;
          }
          return {
            ...item_copy,
            is_show_edit: false,
            user_answer,
            is_answered: false,
          };
        });
      } else {
        this.$toast(this.$t("locale.pc.mytest.testReview.t31"));
      }
    },
    async getData() {
      return new Promise(async (res, rej) => {
        this.SET_IS_LOADING(true);
        let result = await getCourse({
          id: this.courseId?this.courseId : this.wrongId,
        });
        // console.log("courseid===========",this.courseId);
        // console.log("result=============",result);
        if (result && result.data && result.data.code == 200) {
          const { data } = result.data;
          if (data && data.rows && data.rows.length > 0) {
            this.course_obj = data.rows[0];
          }
        } else {
          this.$Message.error(
            this.$t("locale.pc.mytest.testReview.t32") + result.data.msg
          );
        }
        this.SET_IS_LOADING(false);
        res();
      }).then();
    },
    async getTestPaper() {
      let params = {
        id: this.paper_id,
      };
      let result = await getTestPaper(params);
      console.log("试卷", result);
      if (result && result.data && result.data.code == 200) {
        this.paper_obj = result.data.data;
        this.question_arr = this.paper_obj.items
          .filter(
            (i) =>
              i.question &&
              i.question.chapter &&
              i.question.difficulty &&
              i.question.type
          )
          .map((i) => {
            let item_copy = {
              ...i.question,
              score: i.score,
              question: JSON.parse(i.question.question),
            };
            i.answer = i.question.answer;
            console.log("item_copy:", item_copy);
            //user_answer存在使用user_answer
            if (Object.keys(item_copy).includes("user_answer")) {
              //user_answer不存在新建user_answer
            } else {
              let user_answer;
              switch (item_copy.type) {
                case 1:
                  user_answer = "";
                  item_copy = {
                    ...item_copy,
                    answer: Number(i.answer),
                  };
                  break;
                case 2:
                  user_answer = [];
                  try {
                    item_copy = {
                      ...item_copy,
                      answer: JSON.parse(i.answer),
                    };
                  } catch (e) {
                    if (e) {
                      item_copy = {
                        ...item_copy,
                        answer: JSON.parse(i.answer).replace(
                          /^["|'](.*)["|']$/g,
                          "$1"
                        ),
                      };
                    }
                  }
                  break;
                case 3:
                  user_answer = "";
                  break;
                case 4:
                  try {
                    item_copy = {
                      ...item_copy,
                      answer: JSON.parse(i.answer),
                    };
                  } catch (e) {
                    console.log(e);
                    if (e) {
                      item_copy = {
                        ...item_copy,
                        answer: JSON.parse(i.answer).replace(
                          /^["|'](.*)["|']$/g,
                          "$1"
                        ),
                      };
                    }
                  }
                  user_answer = item_copy.answer.map((i) => {
                    return "";
                  });
                  break;
                case 5:
                  user_answer = "";
                  item_copy = {
                    ...item_copy,
                    answer: JSON.parse(i.answer),
                  };
                  break;
              }
              item_copy = {
                ...item_copy,
                user_answer,
              };
            }
            //is_show_edit不存在设置为false
            if (!Object.keys(item_copy).includes("is_show_edit")) {
              item_copy = {
                ...item_copy,
                is_show_edit: false,
              };
            }
            //is_answered不存在设置为false
            if (!Object.keys(item_copy).includes("is_answered")) {
              item_copy = {
                ...item_copy,
                is_show_edit: false,
              };
            }
            return item_copy;
          });
        // this.seconds = 1 * 60 * 1000;
        this.seconds = Number(this.paper_obj.span) * 60 * 1000;
      } else {
        this.$Message.error(
          this.$t("locale.pc.mytest.testReview.t31") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    async getWrong() {
      let params = {};
      let result = {};
      if (this.courseId) {
        params = {
          userId: this.user_info.id,
          courseId: this.courseId,
        };
        result = await wrongQuestions(params);
        console.log("mmmmmmmmmmmmmmmmmmmmmmmmmmm");
      } else {
        params = {
          userId: this.user_info.id,
          donePaperId: this.wrongId,
        };
        result = await getMyWrongWq(params);
      }
      // let params = {
      //   userId: this.user_info.id,
      //   courseId: this.courseId
      // };
      // let result = await wrongQuestions(params);
      console.log("获取错题：", result);
      if (result && result.data && result.data.code == 200) {
        //格式化题目
        let question_arr = result.data.data.rows.map((i) => {
          let item_copy = { ...i.question };
          let user_answer;
          switch (item_copy.type) {
            case 1:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              break;
            case 2:
              user_answer = [];
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              break;
            case 3:
              user_answer = "";
              break;
            case 4:
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              user_answer = item_copy.answer.map((i) => {
                return "";
              });
              break;
            case 5:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              break;
          }
          item_copy = {
            ...item_copy,
            user_answer,
          };
          return item_copy;
        });
        console.log("question_arr:", question_arr);
        //去重计数
        let trim_question_arr = [];
        for (let i = 0; i < question_arr.length; i++) {
          let is_exit = trim_question_arr.filter(
            (ix) => ix.id == question_arr[i].id
          );
          if (is_exit.length == 0) {
            trim_question_arr.push({
              ...question_arr[i],
              wrong_count: 1,
              question: JSON.parse(question_arr[i].question),
            });
          } else {
            trim_question_arr = trim_question_arr.map((ix) => {
              return {
                ...ix,
                wrong_count: ix.wrong_count + 1,
              };
            });
          }
        }
        console.log("trim_question_arr:", trim_question_arr);
        this.question_arr = trim_question_arr;
      } else {
        this.$Message.error(
          this.$t("locale.pc.mytest.testReview.t31") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    async saveWrong(item) {
      let params = {
        item: JSON.stringify([
          {
            userId: this.user_info.id,
            donePaperId: -1,
            score: 0,
            doneQuestionType: "w",
            questionType: item.type,
            mqId: item.id,
          },
        ]),
      };
      let result = await wrongQuestionsSave(params);
      console.log("保存错题：", result);
      if (result && result.data && result.data.code == 200) {
      } else {
        this.$toast(
          this.$t("locale.pc.mytest.testReview.t33"),
          result && result.data && result.data.msg
        );
      }
    },
    next() {
      if (this.num_active >= this.question_list.length) {
        this.num_active = 0;
      } else {
        this.num_active++;
      }
    },
    handleAnswerInputChange(v, item, index) {
      this.question_arr = this.question_arr.map((i) => {
        if (i.id == item.id) {
          return {
            ...i,
            user_answer: i.user_answer.map((i1, x1) => {
              if (index == x1) {
                return v.target.value;
              } else {
                return i1;
              }
            }),
          };
        } else {
          return i;
        }
      });
    },
    handleClickBtn() {
      if (this.type == 1 || this.type == 3) {
        this.question_arr = this.question_arr.map((i, x) => {
          if (x == this.num_active) {
            return {
              ...i,
              is_show_edit: true,
              is_answered: true,
            };
          } else {
            return i;
          }
        });
      } else {
      }
    },
    handleCheck(item) {
      let is_right;
      switch (item.type) {
        case 1:
          if (item.answer == item.user_answer) {
            is_right = true;
          } else {
            is_right = false;
          }
          break;
        case 2:
          let answer_arr2 = [];
          // item.answer.forEach((i1, xi) => {
          item.answer.forEach((i2, x2) => {
            if (item.user_answer.includes(i2)) {
              answer_arr2 = [...answer_arr2, true];
            } else {
              answer_arr2 = [...answer_arr2, false];
            }
          });
          if (answer_arr2.includes(false)) {
            is_right = false;
          } else {
            is_right = true;
          }
          break;
        case 3:
          if (item.answer == item.user_answer) {
            is_right = true;
          } else {
            is_right = false;
          }
          break;
        case 4:
          let answer_arr4 = [];
          item.answer.forEach((i1, xi) => {
            item.user_answer.forEach((i2, x2) => {
              if (i1 == i2) {
                answer_arr4 = [...answer_arr4, true];
              } else {
                answer_arr4 = [...answer_arr4, false];
              }
            });
          });
          if (answer_arr4.includes(false)) {
            is_right = false;
          } else {
            is_right = true;
          }
          break;
        case 5:
          if (item.answer === item.user_answer) {
            is_right = true;
          } else {
            is_right = false;
          }
          break;
      }
      console.log("is_right:", is_right);
      this.question_arr = this.question_arr.map((i, x) => {
        if (item.id == i.id) {
          return {
            ...i,
            is_answered: true,
          };
        } else {
          return i;
        }
      });
      if (!this.is_exam) {
        if (!is_right) {
          this.question_arr = this.question_arr.map((i, x) => {
            if (item.id == i.id) {
              return {
                ...i,
                is_show_edit: true,
              };
            } else {
              return i;
            }
          });
          this.saveWrong({ ...item, is_answered: true, is_show_edit: true });
        } else {
          if (this.num_active >= this.question_arr.length + 1) {
            return;
          }
          this.num_active = this.num_active + 1;
        }
      } else {
        if (this.num_active >= this.question_arr.length + 1) {
          return;
        }
        this.num_active = this.num_active + 1;
      }
    },
    handleRestart() {
      if (this.type == 2) {
        this.handleSubmit();
      } else {
        this.question_arr = this.question_arr.map((i) => {
          let item_copy = { ...i };
          let user_answer;
          switch (item_copy.type) {
            case 1:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
            case 2:
              user_answer = [];
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
            case 3:
              user_answer = "";
              break;
            case 4:
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              user_answer = item_copy.answer.map((i) => {
                return "";
              });
              break;
            case 5:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
          }
          return {
            ...i,
            is_show_edit: false,
            user_answer,
            is_answered: false,
          };
        });
        this.$nextTick(() => {
          this.num_active = 0;
        });
      }
    },
    async submitTestPaper(){
      let params = {
            userId: this.user_info.id,
            paperId: Number(this.paper_id),
            items: JSON.stringify(
              this.question_list.map((i) => {
                let copy_item = { ...i };
                delete copy_item.is_show_edit;
                delete copy_item.is_answered;
                if (copy_item.type == 2) {
                  copy_item = {
                    ...copy_item,
                    user_answer: copy_item.user_answer.map((i1, x1) => {
                      for (
                        let i2 = 0;
                        i2 < copy_item.question.answer.length;
                        i2++
                      ) {
                        if (i1 == copy_item.question.answer[i2]) {
                          return i2;
                        }
                      }
                    }),
                  };
                }
                return {
                  ...copy_item,
                  user_answer:
                    copy_item.type == 1 || copy_item.type == 5
                      ? String(copy_item.user_answer)
                      : copy_item.user_answer,
                  mqId: copy_item.id,
                  questionType: copy_item.type,
                  testPaperId: Number(this.paper_id),
                };
              })
            ),
          };
          console.log("params:", params);
          let result = await sumbitTest(params);
          console.log("result:", result);
          if (result && result.data && result.data.code == 200) {
            this.test_result = result.data.data;
            //拷贝数组  保留用户的答题
            let origin_question_list = this.question_list.map((i) => {
              return {
                ...i,
              };
            });
            this.question_arr = this.question_arr.map((i, x) => {
              return {
                ...i,
                is_answered: true,
                is_show_edit: true,
              };
            });
            // this.is_show_result = true;
            // this.is_done_test = true;
            this.interval = null;
            this.destroyRemotion();
          } else {
            this.$Message.error(
              this.$t("locale.pc.mytest.testReview.t36"),
              result && result.data && result.data.msg
            );
          }
        
    },
    finish() {
      // this.is_finish = true;
      // this.handleSubmit();
      this.is_show_submit = true;
      this.submitTestPaper();
    },
    handleSubmit() {
      this.$Modal.confirm({
        title: this.$t("locale.pc.mytest.testReview.t34"),
        content: this.$t("locale.pc.mytest.testReview.t35"),
        onOk: async () => {
          let params = {
            userId: this.user_info.id,
            paperId: Number(this.paper_id),
            items: JSON.stringify(
              this.question_list.map((i) => {
                let copy_item = { ...i };
                delete copy_item.is_show_edit;
                delete copy_item.is_answered;
                if (copy_item.type == 2) {
                  copy_item = {
                    ...copy_item,
                    user_answer: copy_item.user_answer.map((i1, x1) => {
                      for (
                        let i2 = 0;
                        i2 < copy_item.question.answer.length;
                        i2++
                      ) {
                        if (i1 == copy_item.question.answer[i2]) {
                          return i2;
                        }
                      }
                    }),
                  };
                }
                return {
                  ...copy_item,
                  user_answer:
                    copy_item.type == 1 || copy_item.type == 5
                      ? String(copy_item.user_answer)
                      : copy_item.user_answer,
                  mqId: copy_item.id,
                  questionType: copy_item.type,
                  testPaperId: Number(this.paper_id),
                };
              })
            ),
          };
          console.log("params:", params);
          let result = await sumbitTest(params);
          console.log("result:", result);
          if (result && result.data && result.data.code == 200) {
            this.test_result = result.data.data;
            //拷贝数组  保留用户的答题
            let origin_question_list = this.question_list.map((i) => {
              return {
                ...i,
              };
            });
            this.question_arr = this.question_arr.map((i, x) => {
              return {
                ...i,
                is_answered: true,
                is_show_edit: true,
              };
            });
            // this.paper_obj = {
            //   ...this.paper_obj,
            //   items: this.paper_obj.items.map((i, x) => {
            //     let copy_item = { ...i };
            //     return {
            //       ...copy_item,
            //       question: {
            //         ...copy_item.question,
            //         is_answered: true,
            //         is_show_edit: true,
            //         user_answer: origin_question_list[x].user_answer,
            //         answer: origin_question_list[x].answer
            //       }
            //     };
            //   })
            // };
            this.is_show_result = true;
            this.is_done_test = true;
            this.interval = null;
            this.destroyRemotion();
          } else {
            this.$Message.error(
              this.$t("locale.pc.mytest.testReview.t36"),
              result && result.data && result.data.msg
            );
          }
        },
      });
      // this.$dialog
      //   .confirm({
      //     title: "提示",
      //     message: "您确定要提交试卷吗？"
      //   })
      //   .then(async () => {
      //   })
      //   .catch(() => {
      //     // on cancel
      //   });
    },
    //阻止F5刷新
    keydown(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      console.log("code:", code);
      //组合事件
      if (
        code == 116 ||
        (evt.ctrlKey == true && code == 82) ||
        (evt.ctrlKey == true && code == 116) ||
        code == 114
      ) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
          evt.cancelBubble = true;
          return false;
        }
      }

      //屏蔽Alt+F4
      if (evt.altKey && code == 115) {
        window.showModelessDialog(
          "about:blank",
          "",
          "dialogWidth:1px;dialogheight:1px"
        );
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }

      //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
      if (evt.altKey && (code == 37 || code == 39)) {
        console.log("网页路由");
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }
    },
    reflesh(e) {
      var evt = window.event || e;
      let message = undefined;
      event.returnValue = message;
      return message;
    },
    context(e) {
      return false;
    },
    removeReflesh() {
      console.log("清除刷新事件！");
      document.addEventListener("keydown", this.keydown, false);
      document.addEventListener("contextmenu", this.context, false);
      window.addEventListener("beforeunload", this.reflesh, false);
    },
    destroyRemotion() {
      console.log("恢复事件！");
      document.removeEventListener("keydown", this.keydown);
      document.removeEventListener("contextmenu", this.context);
      window.removeEventListener("beforeunload", this.reflesh);
    },
    initPage() {
      if (process.client) {
        if (!this.token && Object.keys(this.user_info).length == 0) {
          this.$router.replace("/login");
        }
      }
      this.getData();
      this.initMajorList();
      if (this.type == 2) {
        console.log("----------------试卷----------------");

        this.getTestPaper();
        if (process.client) {
          this.$nextTick(() => {
            this.removeReflesh();
          });
        }
      } else if (this.type == 3) {
        console.log("----------------错题----------------");
        this.getWrong();
      } else if (this.type == 1) {
        console.log("----------------题库----------------");
        this.getQuestion();
      }
    },
    ok() {
      // this.$router.back();
      this.$router.push({path:'classroom?action=mytest'})
    },
    cancel() {
      this.num_active = 0;
      this.is_show_result = false;
    },
    getWrongTime() {
      if (this.num_active > this.question_list.length - 1) {
        return "hidden";
      } else {
        return (
          this.question_list[this.num_active] &&
          this.question_list[this.num_active].wrong_count
        );
      }
    },
  },
  created() {
    this.initPage();
  },
};
</script>

<style lang="scss" scope>
.page-testreview {
  width: 100%;
  height: 100%;
  padding: 20px 0;
        .test-result-box {
        margin: auto;
        text-align: center;
        .rs-tt {
          color: #010101;
          font-size: 14px;
          font-family: SourceHanSansSC-regular;
          .tt-st {
            font-weight: bolder;
          }
        }
        .rs-tt {
          vertical-align: text-bottom;
          .rs-sc {
            color: var(--theme-color);
            font-size: 36px;
            text-align: center;
            font-family: SourceHanSansSC-bold;
          }
          .rs-lg {
            color: var(--theme-color);
          }
        }
        .rs-md {
        }
        .rs-tx {
          color: #010101;
          font-size: 14px;
          text-align: center;
          font-family: SourceHanSansSC-regular;
        }
      }
  .logout-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    .logout {
      width: 444px;
      height: 226px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      box-shadow: 0px 3px 38px 0px rgba(58, 64, 74, 0.26);
      border-radius: 8px;
      .logout-title-modal {
        text-align: center;
        margin: 50px 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #5d6066;
      }
      .logout-tips {
        text-align: center;
        font-size: 14px;
      }
      .logout-btn {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .ivu-btn {
          width: 90px;
          height: 34px;
          text-align: center;
          background-color: var(--theme-color);
          color: rgb(255, 255, 255);
        }
      }
    }
  }
  .submit-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    .submit {
      width: 444px;
      height: 226px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      box-shadow: 0px 3px 38px 0px rgba(58, 64, 74, 0.26);
      border-radius: 8px;
      .submit-title-modal {
        text-align: center;
        margin: 70px 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #5d6066;
      }
      .submit-img {
        position: absolute;
        left: 50%;
        top: -44px;
        width: 88px;
        height: 88px;
        transform: translateX(-50%);
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0px 3px 16px 0px rgba(58, 64, 74, 0.08);
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
          background-color: var(--theme-color);
        }
      }
      .submit-tips {
        text-align: center;
        font-size: 14px;
      }
      .submit-btn {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .ivu-btn {
          width: 90px;
          height: 34px;
          text-align: center;
          background-color: var(--theme-color);
          color: rgb(255, 255, 255);
        }
      }
    }
  }

  .pageposition {
    width: 1200px;
    height: 800px;
    margin: 0px auto;
    background: #fff;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 50px;
      border-bottom: 1px solid #e9edf5;
      .head-left {
        .head-l-t {
          font-size: 18px;
          font-weight: bold;
          color: #5a5e66;
        }
        .head-tips {
          font-size: 14px;
          font-weight: bold;
          color: #ff9090;
          margin-left: 20px;
        }
      }
      .head-right {
      }
    }
    .body-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 50px;
      .toppos {
        width: 100%;
        display: flex;
        height: 90px;

        .top-left {
          width: 20%;
          display: flex;
          align-items: center;
          img {
            background-color: var(--theme-color);
          }
          .time {
            font-size: 30px;
            font-weight: bold;
            color: #43474d;
          }
        }
        .mainpos{
          width: 20%;
          font-size: 30px;
          font-weight: bold;
          color: #43474d;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .top-right {
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 20px;
          .paper-name {
            font-size: 18px;
            font-weight: bold;
            color: #43474c;
          }
          .question-count {
            font-size: 18px;
            font-weight: bold;
            color: #43474c;
          }
        }
      }
      .questions {
        width: 100%;
        display: flex;
        height: 600px;
        .questions-left {
          width: 20%;
          .question-cart {
            width: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            font-weight: bold;
            color: #43474d;
          }
          .question-box {
            width: 100%;
            height: 560px;
            overflow: auto;
            &::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              background-color: var(--theme-color);
              background-image: -webkit-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
              );
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #ededed;
              border-radius: 10px;
            }
            .question-list {
              margin: 10px 0;
              // display: flex;
              // justify-content: space-between;
              border-radius: 10px;
              overflow: hidden;
              .list-item {
                float: left;
                width: 50px;
                margin: 0 1px;
                height: 24px;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                border: 1px solid #ddd;
              }
              .num_active {
                background-color: var(--theme-color);
                border: 1px solid var(--theme-color);
                color: #fff;
              }
              .active-left {
                // border-radius: 10px 0px 0px 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
              }
              .active-right {
                // border-radius: 0px 10px 10px 0px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                
                
              }
            }
          }
        }
        .questions-right {
          box-sizing: border-box;
          padding: 0 20px;
          width: 80%;
          .answer-box {
            margin: 12px 0;
            .ivu-radio-wrapper,
            .ivu-checkbox-wrapper {
              font-size: 14px;
              display: block;
            }
            .ivu-input {
              font-size: 14px;
            }
            .ivu-radio-wrapper + .ivu-radio-wrapper {
              margin-top: 12px;
            }
            .ivu-input-wrapper + .ivu-input-wrapper {
              margin-top: 12px;
            }
            .ivu-checkbox-wrapper + .ivu-checkbox-wrapper {
              margin-top: 12px;
            }
          }
          .question-btn {
            margin-bottom: 20px;
            text-align: right;
            .ivu-btn {
              background-color: var(--theme-color);
              color: rgb(255, 255, 255);
            }
          }
          .parsing {
            padding: 20px;
            border-top: 1px solid;
            height: 206px;
            width: 100%;
            .right_answer {
              .right-box {
                > p {
                  font-size: 14px;
                  color: #666;
                }
              }
              > p {
                font-size: 18px;
                color: #010101;
              }
              padding-bottom: 5px;
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 14px;
              color: #666;
              font-style: normal;
              letter-spacing: 0px;
              line-height: 27px;
              text-decoration: none;
            }
            .error_answer {
              padding-bottom: 5px;
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 18px;
              color: rgba(238, 65, 60, 1);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 27px;
              text-decoration: none;
            }
            .error_parsing {
              padding-bottom: 5px;
              .e1 {
                width: 110px;
                font-family: SourceHanSansSC;
                font-weight: 700;
                font-size: 18px;
                color: rgb(16, 16, 16);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 27px;
                text-decoration: none;
              }
              > p {
                font-family: SourceHanSansSC;
                font-weight: 400;
                font-size: 14px;
                color: #666;
                font-style: normal;
                letter-spacing: 0px;
                line-height: 24px;
                text-decoration: none;
              }
              .e-ctn {
                font-size: 14px;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
</style>
